<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a{
            display: inline-block;
        } */
        html {
            height: 666px;
            /* display: flex;
            justify-content: center;
            align-items: center; */
        }

        * {
            margin: 0;
            padding: 0;
        }

        .con {
            width: 800px;
            height: 800px;
            display: none;
        }

        .active {
            display: inline-block;
        }

        th {
            padding: 0 20px;
        }

        td {
            text-align: center;
        }

        .addnum,
        .subnum {
            width: 20px;
            height: 20px;

        }

        .addnum {
            float: left;
            margin-top: 2px;
            transform: translateX(20px);
        }

        .subnum {
            float: right;
            margin-top: 2px;
            transform: translateX(-20px);
        }
    </style>
</head>

<body>
    <div>
        <a href="#" class="active">录入</a>
        <a href="#" class="showA">展示</a>
    </div>
    <div class="con active">
        商品名称：<input type="text" class="username"><br>
        商品种类：<select class="goodstype">
            <option value="0">水果</option>
            <option value="1">干果</option>
            <option value="2">母婴</option>
            <option value="3">玩具</option>
        </select><br>
        商品价格：<input type="text"><br>
        <button onclick="addfun()">提交</button>
    </div>
    <div class="con">
        <button onclick="findgoods(-1)">全部</button>
        <button onclick="findgoods(0)">水果</button>
        <button onclick="findgoods(1)">干果</button>
        <button onclick="findgoods(2)"> 母婴</button>
        <button onclick="findgoods(3)">玩具</button>
        <br>
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品类型</th>
                    <th>商品库存</th>
                    <th>时间</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody class="mytbody">

            </tbody>
        </table>
    </div>
    <script src="./jquery/jquery-3.4.1.js"></script>
    <script>
        function addfun() {
            let goodsname = $(".username").val()
            let goodstype = $(".goodstype").val()
            let goodsprice = $(".goodstype").val()
            $.ajax({
                method: "post",
                url: "addgoods.php",
                data: { goodsname: goodsname, goodstype: goodstype, goodsprice: goodsprice },
                success: function (res) {
                    //    console.log(res)
                }
            })
        }
        $("a").click(function () {
            //  console.log(1)
            let index = $(this).index()
            $(this).addClass("active")
                .siblings()
                .removeClass("acative")
                .parent()
                .parent()
                .find(".con")
                .eq(index)
                .addClass("active")
                .siblings()
                .removeClass("active")
        })
        // let showgoods = []
        // let flag = false;
        // function addshowgoods() {
        //     $.ajax({
        //         method: "get",               
        //         url: "index.php",                    后端返回的数据添加到数组中
        //         success: function (res) {
        //             res = JSON.parse(res)
        //             console.log(res)

        //             for (let i = 0; i < res.length; i++) {
        //                 //if (res[i].num) {
        //                 res[i].num = Number(res[i].num);

        //                 // }
        //             }
        //             showgoods.push(res)
        //         }
        //     })
        // }
        // addshowgoods()
        let objtype = {
            0: "水果",
            1: "干果",
            2: "母婴",
            3: "玩具"
        }
            let variable = -1;
            function findgoods(id) {
                variable = id;
                $.ajax({
                    method: "get",
                    url: "find.php?id=" + id,
                    success: function (res) {
                       // console.log(res)
                        res = JSON.parse(res)
                        let str = ""
                        for (let i = 0; i < res.length; i++) {
                            //   console.log(goodsnum(res[i]))
                            str += `<tr>
                    <td>${res[i].id}</td>
                    <td>${res[i].goodsname}</td>
                    <td>￥${res[i].price}</td>
                    <td>${objtype[res[i].type]}</td>
                    <td>${!+res[i].num == 0 ? `<button onclick = update(${+res[i].num + 1},${res[i].id})>+</button>${res[i].num}<button onclick = update(${+res[i].num - 1},${res[i].id})>-</button>` : `<button onclick = update(${+res[i].num + 1},${res[i].id})>+</button>`}</td>
                    <td>${res[i].time}</td>
                    <td><a href="#" onclick = delfun(${res[i].id})>删除</a></td>
                            </tr>`
                        }
                        $(".mytbody").html(str)

                    }

                })
            }
        
          
        

        function showallgoods() {


            $.ajax({
                method: "get",
                url: "find.php?id=-1",
                success: function (res) {
                    res = JSON.parse(res)
                    //  console.log(res)
                    // if(flag){
                    //     for(let i =0; i < res.length; i++){
                    //         if(res[i].num){
                    //              res[i].num = Number(res[i].num);  
                    //              showgoods.push(res)
                    //         }  
                    // }

                    // }



                    // function goodsnum(res) {         //给数量判断是否为0

                    //     if (!+res.num == 0) {
                    //         return `<button class = "addnum" onclick = addnum(${res.id})>+</button>${res.num}<button class = "subnum" onclick = subnum(${res})>-</button>`
                    //     } else {
                    //         return `<button class = "addnum" onclick = addnum(${res.id})>+</button>`
                    //     }

                    // }
                    let str = ""
                    for (let i = 0; i < res.length; i++) {
                        //   console.log(goodsnum(res[i]))
                        str += `<tr>
                    <td>${res[i].id}</td>
                    <td>${res[i].goodsname}</td>
                    <td>￥${res[i].price}</td>
                    <td>${objtype[res[i].type]}</td>
                    <td>${!+res[i].num == 0 ? `<button onclick = update(${+res[i].num + 1},${res[i].id})>+</button>${res[i].num}<button onclick = update(${+res[i].num - 1},${res[i].id})>-</button>` : `<button onclick = update(${+res[i].num + 1},${res[i].id})>+</button>`}</td>
                    <td>${res[i].time}</td>
                    <td><a href="#" onclick = delfun(${res[i].id})>删除</a></td>
                            </tr>`
                    }
                    $(".mytbody").html(str)

                }

            })
        }

        $(".showA").click(function () {

            showallgoods()
        })
        function update(num, id) {
            console.log(variable)
            $.ajax({
                method: "get",
                url: "update.php?num=" + num + "&id=" + id,
                success: function (res) {
                   
                  if(variable == -1){
                        showallgoods()
                  }else{
                    findgoods(variable)
                  }
                }
            })
        }
        // function addnum(id) {                             //点击加号增加商品数量
        //     let addnum = showgoods[0][id-1].num += 1
        //     $.ajax({
        //         method:"get",
        //         data:{num : addnum},
        //         url:"addindex.php"
        //     })


        //}
        function delfun(id) {

            $.ajax({
                method: "get",
                url: "del.php?id=" + id,
                success: function (res) {
                    // console.log(res)
                    if (res) {
                        showallgoods()
                    }
                }
            })
        }
    </script>
</body>

</html>